<template>
  <el-dialog title="详情" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
    <el-form ref="form" :model="formlist" label-width="80px">
      <el-row>

        <el-col :span="24">
          <el-form-item label="数据库源：" label-width="120px">
            <el-select v-model="formlist.sourceId" disabled>
              <el-option v-for="item in rDsList" :key="item.id" :label="item.sourceName" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="写入源：" label-width="120px">
            <el-select v-model="formlist.targetId" disabled>
              <el-option v-for="item in rDsList" :key="item.id" :label="item.sourceName" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="任务目录：" prop="directoryId" label-width="120px">
            <el-input v-model="formlist.directoryId" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="cron表达式：" label-width="120px">
            <el-input v-model="formlist.cronExpression" disabled></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24" v-if="formlist.time.length > 0">
          <el-form-item label="时间段:" label-width="120px">
            <el-date-picker disabled v-model="formlist.time" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="执行器：" label-width="120px">
            <el-input v-model="formlist.appName" disabled></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="执行器类：" label-width="120px">
            <el-input v-model="formlist.executeclass" disabled></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="执行器类方法：" label-width="120px">
            <el-input v-model="formlist.methodName" disabled></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="数据源表名：" label-width="120px">
            <el-input v-model="formlist.sourceTableName" disabled></el-input>
            <!-- <el-select v-model="formlist.sourceTableId" disabled>
							<el-option v-for="item in this.data" :key="item.id" :label="item.label" :value="item.id" />
						</el-select> -->
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="写入源表名：" label-width="120px">
            <el-input v-model="formlist.targetTableName" disabled></el-input>
            <!-- <el-select v-model="formlist.targetTableId" disabled>
							<el-option v-for="item in this.data" :key="item.id" :label="item.label" :value="item.id" />
						</el-select> -->
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="任务名称：" label-width="120px">
            <el-input v-model="formlist.jobName" disabled></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="任务描述：" label-width="120px">
            <el-input v-model="formlist.description" disabled></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <div class="grid-content bg-purple-dark">
            <el-form-item label="调度类型">
              <el-radio v-for="(item, index) in dictList('scheduling_type')" disabled v-model="formlist.scheduleType" :key="index" :label="item.value">
                {{ item.label }}
              </el-radio>
            </el-form-item>
          </div>
        </el-col>

        <el-col :span="24">
          <div class="grid-content bg-purple-dark">
            <el-form-item label="调度等级" prop="scheduleLevel">
              <el-radio v-for="(item, index) in dictList('scheduling_level')" :key="index" disabled v-model="formlist.scheduleLevel" :label="item.value">
                {{ item.label }}
              </el-radio>
            </el-form-item>
          </div>
        </el-col>

      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
import { listDataSource } from '@/api/metadata/sqlconsole'
import { fetchMasterdataDirectoryList } from '@/api/masterdata/masterdataDirectory'
import { getTableList } from '@/api/masterdata/masterdataTable'
export default {
  props: ['details'],
  data() {
    return {
      treeList: [],
      upResName: '',
      detailsobj: this.details,
      dialogVisible: true,
      rDsList: [],
      rTbList: [],
      tableData: [],
      data: [],
      treeProps: {
        children: 'children',
        label: 'label',
        checkStrictly: true,
      },
      treeQuery: {
        page: 1,
        limit: 25,
        ancestralId: 10,
      },
      formlist: {
        directoryId: '',
        time: [],
        name: '',
        jobName: '',
        sourceId: '',
        targetId: '',
        appName: '',
        targetTableId: '',
        sourceTableId: '',
        targetTableName: '',
        sourceTableName: '',
        description: '',
        scheduleType: '',
        scheduleLevel: '',
        cronExpression: '',
        methodName: '',
        executeclass: '',
      },
    }
  },
  mounted() {
    this.getJdbcDs()
    this.getTreeList()
    this.formlist.sourceId = this.detailsobj.sourceDatasourceId
    this.formlist.targetId = this.detailsobj.targetDatasourceId
    this.formlist.appName = this.detailsobj.appName
    this.formlist.jobName = this.detailsobj.jobName
    this.formlist.directoryId = this.detailsobj.directoryId
    this.formlist.cronExpression = this.detailsobj.cronExpression
    this.formlist.scheduleType = this.detailsobj.jobConfig.scheduleType
    this.formlist.scheduleLevel = this.detailsobj.jobConfig.scheduleLevel
    this.formlist.description = this.detailsobj.description
    this.formlist.methodName = this.detailsobj.methodName
    this.formlist.executeclass = this.detailsobj.executeClass
    this.formlist.sourceTableId = this.detailsobj.dataExtractionDetailList[0].sourceTableId
    this.formlist.targetTableId = this.detailsobj.dataExtractionDetailList[0].targetTableId
    this.formlist.sourceTableName = this.detailsobj.dataExtractionDetailList[0].sourceTableName
    this.formlist.targetTableName = this.detailsobj.dataExtractionDetailList[0].targetTableName
    if (this.detailsobj.extractionStartTime) {
      this.formlist.time = [this.detailsobj.extractionStartTime, this.detailsobj.extractionEndTime]
    }
  },
  methods: {
    diguiF(list, item) {
      let name = ''
      list.map((v, i) => {
        if (v.id == item) {
          name = v.name
        } else {
          if (v.children && v.children.length) {
            name = this.diguiF(v.children, item)
          }
        }
      })
      return name
    },
    //节点点击事件
    handleNodeClick(data) {
      this.upResName = data.name
    },
    getTreeList() {
      fetchMasterdataDirectoryList(this.treeQuery).then((response) => {
        if (response.data.code == 200) {
          this.treeList = response.data.data
          this.formlist.directoryId = this.diguiF(this.treeList, this.formlist.directoryId)
        } else {
          this.$message.error(response.data.msg)
        }
      })
    },
    getJdbcDs() {
      getTableList({ sourceId: this.formlist.sourceId }).then((res) => {
         
        if (res.data.code == 200) {
          this.rTbList = res.data.data
          this.tableData = []
          this.data = []
          for (let i = 0; i < this.rTbList.length; i++) {
            this.tableData.push({
              id: this.rTbList[i].id,
              tableName: this.rTbList[i].tableName + this.rTbList[i].tableComment,
              tableComment: this.rTbList[i].tableComment,
              table: this.rTbList[i].tableName,
            })
            this.data.push({
              key: this.rTbList[i].id,
              label: this.rTbList[i].tableName,
              tableName: this.rTbList[i].tableName + this.rTbList[i].tableComment,
              tableComment: this.rTbList[i].tableComment,
              table: this.rTbList[i].tableName,
              id: this.rTbList[i].id,
              total: this.rTbList[i].total,
            })
          }
        }
      })
      listDataSource().then((response) => {
        if (response.data.code == 200) {
          response.data.data.map((v, i) => {
            this.rDsList.push(v)
          })
          console.log(this.rDsList)
        }
      })
    },
    handleClose() {
      this.dialogVisible = false
      this.$emit('change')
    },
  },
}
</script>

<style></style>
